<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>大众点评</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css">
    <link href="./css/main.css" rel="stylesheet">
    <link href="./css/info.css" rel="stylesheet">

    <style type="text/css">
        .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
            padding-left: 15px;
        }

        .el-tabs, .el-tab-pane {
            height: 100%;
        }

        .el-tabs__header {
            height: 10%;
        }

        .el-tabs__content {
            height: 90%;
        }

        .scrollable-pane {
            overflow-y: auto;
        }

        .scrollable-content {
            max-height: 400px; /* 调整最大高度的值 */
        }

    </style>

</head>

<body>
<div id="app">
    <div class="header">
        <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
        <div class="header-title">个人主页&nbsp;&nbsp;&nbsp;</div>
    </div>
    <div class="basic">
        <div class="basic-icon">
            <img :src="user.icon || '/imgs/icons/default-icon.png'" alt="">
        </div>
        <div class="basic-info">
            <div class="name">{{user.nickName}}</div>
            <span>{{info.city}}</span>
            <div class="edit-btn" @click="toEdit">
                编辑资料
            </div>
        </div>
        <div class="logout-btn" @click="logout">
            退出登录
        </div>
    </div>
    <div class="introduce">
        <span v-if="info.introduce">{{info.introduce}}</span>
        <span v-else>添加个人简介，让大家更好的认识你 <i class="el-icon-edit"></i></span>
    </div>
    <div class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!--@click="queryBlogs(this.current)"-->
            <el-tab-pane label="笔记" name="1"  >
                <div class="scrollable-pane"  @scroll="onScroll">
<!--                <div class="scrollable-pane" ref="scrollablePane" @scroll="handleScroll">-->
                <div class="scrollable-content" >
                    <div v-for="b in blogs" :key="b.id" class="blog-item">
                        <div class="blog-img"><img :src="b.images.split(',')[0]" alt=""></div>
                        <div class="blog-info">
                            <div class="blog-title">{{b.title}}</div>
                            <div class="blog-liked" style="float: right"><img src="/imgs/thumbup.png" alt=""
                                                                              @click="addLike(b)"> {{b.liked}}
                            </div>
                            <div class="blog-comments" style="float: right"><i class="el-icon-chat-dot-round"></i>
                                {{b.comments}}
                            </div>

                        </div>
                        <div style="float: right;padding-top: 15px;padding-left: 10px">
                        <el-button type="text" style="color: red;" @click="del(b.id)"
                                  >删除
                        </el-button>
                        </div>
                    </div>
                </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="粉丝" name="2">
                <div>你关注谁：</div>
                <div class="follow-info" v-for="u in YoursFollows" :key="u.id">
                    <div class="follow-info-icon" @click="toOtherInfo(u.id)">
                        <img :src="u.icon || '/imgs/icons/default-icon.png'" alt="">
                    </div>
                    <div class="follow-info-name">
                        <div class="name">{{u.nickName}}</div>
                    </div>
                    <div class="follow-info-btn" @click="toOtherInfo(u.id)">
                        去主页看看
                    </div>
                </div>
            </el-tab-pane>

            <el-tab-pane label="关注" name="3" @click="queryCommonFollow()">

                    <div>谁关注你：</div>
                    <div class="follow-info" v-for="u in commonFollows" :key="u.id">
                        <div class="follow-info-icon" @click="toOtherInfo(u.id)">
                            <img :src="u.icon || '/imgs/icons/default-icon.png'" alt="">
                        </div>
                        <div class="follow-info-name">
                            <div class="name">{{u.nickName}}</div>
                        </div>
                        <div class="follow-info-btn" @click="toOtherInfo(u.id)">
                            去主页看看
                        </div>
                    </div>


            </el-tab-pane>
            <el-tab-pane label="推送" name="4" >
                <div class="blog-list" >
                    <div class="blog-box" v-for="b in blogs2" :key="b.id">
                        <div class="blog-img2" @click="toBlogDetail(b)"><img :src="b.img" alt=""></div>
                        <div class="blog-title">{{b.title}}</div>
                        <div class="blog-foot">
                            <div class="blog-user-icon"><img :src="b.icon || '/imgs/icons/default-icon.png'" alt="">
                            </div>
                            <div class="blog-user-name">{{b.name}}</div>
                            <div class="blog-liked" @click="addLike(b)">
                                <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                     xmlns="http://www.w3.org/2000/svg" p-id="2187" width="14" height="14">
                                    <path d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                                          p-id="2188" :fill="b.isLike ? '#ff6633' : '#82848a'"></path>
                                </svg>
                                {{b.liked}}
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <foot-bar :active-btn="4"></foot-bar>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: "",
            activeName: "1",
            info: {},
            blogs: [],
            blogs2: [], // 关注的人的播客
            params: {
                minTime: 0, // 上一次拉取到的时间戳
                offset: 0, // 偏移量
            },
            count: 5,
            isReachBottom: false,
            current: 1,  // 添加当前页数属性
            totalPages:0,
            commonFollows: [], // 谁关注我
            YoursFollows:[]  //你关注谁
        },
        created() {
            this.queryUser();
            // this.queryBlogs(this.current);
            // this.handleScroll(); // 初始化时进行一次滚动检查
            // window.addEventListener('scroll', this.handleScroll);
        },
        methods: {
            del(id) {
                axios.delete("/blog/del/" + id).then(res => {
                    console.log("shanchu" + id)

                    this.$message.success("删除成功")

                }).catch(err => {
                    this.$message.error("删除失败")
                })

            },
            toOtherInfo(id){
                location.href = "/other-info.html?id=" + id
            },
            queryYoursFollow() {
                axios.get("/follow/yours/" + this.user.id)
                    .then(({data}) => this.YoursFollows = data)
                    .catch(err => {
                        this.$message.error(err);
                    })
            },
            queryCommonFollow() {
                axios.get("/follow/mine/" + this.user.id)
                    .then(({data}) => this.commonFollows = data)
                    .catch(err => {
                        this.$message.error(err);
                    })
            },
            load() {
                this.count += 2;
            },
            toBlogDetail(b) {
                location.href = "/blog-detail.html?id=" + b.id;
            },
            // queryBlogs() {
            //   axios.get("/blog/of/me")
            //     .then(({data}) => this.blogs = data)
            //     .catch(this.$message.error)
            // },
            queryBlogs(current) {

                axios.get("/blog/of/me?current="+current)
                    .then(({data}) => {
                        console.log(data.totalPage)
                        // 提取最大总页数
                        this.totalPages = data.totalPage;
                        // 提取当前页数据

                        const records = data.records;
                        records.forEach(b => (b.img = b.images.split(",")[0]));
                        this.blogs = this.blogs.concat(records);
                        this.scrollEnd = false; // Reset scrollEnd flag

                        }
                    )
                    .catch(this.$message.error);
            },
            queryBlogsOfFollow(clear) {
                if (clear) {
                    this.params.offset = 0;
                    this.params.minTime = new Date().getTime() + 1;
                }
                let {minTime, offset: os} = this.params;
                axios.get("/blog/of/follow", {
                    params: {offset: os, lastId: minTime || new Date().getTime() + 1}
                })
                    .then(({data}) => {
                        if (!data) {
                            return;
                        }
                        let {list, ...params} = data;
                        list.forEach(b => b.img = b.images.split(",")[0])
                        this.blogs2 = clear ? list : this.blogs2.concat(list);
                        this.params = params;
                    })
                    .catch(e => console.log(e))
            },
            queryUser() {
                // 查询用户信息
                axios.get("/user/me")
                    .then(({data}) => {
                        // 保存用户
                        this.user = data;
                        // 查询用户详情
                        this.queryUserInfo();
                        // 查询用户笔记

                        this.queryBlogs(this.current);
                        console.log("user:"+data.id)
                        localStorage.setItem("userId", JSON.stringify(data.id))
                    })
                    .catch(err => {
                        location.href = "login.html"
                    })
            },
            goBack() {
                history.back();
            },
            queryUserInfo() {
                axios.get("/user/info/" + this.user.id)
                    .then(({data}) => {
                        if (!data) {
                            return
                        }
                        // 保存用户详情
                        this.info = data;
                        // 保存到本地
                        sessionStorage.setItem("userInfo", JSON.stringify(data))
                        localStorage.setItem("userId", JSON.stringify(this.user.id))
                        console.log("ij"+this.user.id)
                    })
                    .catch(err => {
                        this.$message.error(err);
                    })
            },
            toEdit() {
                location.href = 'info-edit.html'
            },
            logout() {
                axios.post("/user/logout")
                    .then(() => {
                        // 清理session
                        sessionStorage.removeItem("token")
                        // 跳转
                        location.href = "/"
                    })
                    .catch(this.$message.error)
            },

            handleClick(r) {
                if (r.name === '1') { // 点击笔记选项卡
                    // this.queryBlogs(this.current); // 调用queryBlogs方法
                } else if (r.name === '4') {
                    this.queryBlogsOfFollow(true);
                }else if(r.name==='3'){
                    this.queryCommonFollow()
                }else if(r.name==='2'){
                    this.queryYoursFollow()
                }
            },

            addLike(b) {
                const current = this.current;
                axios.put("/blog/like/" + b.id)
                    .then(({data}) => {
                        axios.get("/blog/cache", {params: {current: current}}).then(({data}) => {

                            console.log("删除缓存成功")
                        })
                        axios.get("/blog/" + b.id)
                            .then(({data}) => {
                                this.queryBlogById(b);
                            })
                            .catch(this.$message.error)
                    })
                    .catch(err => {
                        this.$message.error(err)
                    })
            },
            queryBlogById(b) {
                axios.get("/blog/" + b.id)
                    .then(({data}) => {
                        b.liked = data.liked;
                        b.isLike = data.isLike;
                    })
                    .catch(() => {
                        this.$message.error
                        b.liked++;
                    })
            },
            // handleScroll() {
            //     const scrollablePane = this.$refs.scrollablePane;
            //     if (scrollablePane) {
            //         const scrollTop = scrollablePane.scrollTop;
            //         const offsetHeight = scrollablePane.offsetHeight;
            //         const scrollHeight = scrollablePane.scrollHeight;
            //         if (scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom) {
            //             this.isReachBottom = true;
            //             console.log("触底");
            //             this.current++;
            //             if (this.current <= this.totalPages) {
            //                 this.queryBlogs(this.current);
            //             }
            //         } else {
            //             this.isReachBottom = false;
            //         }
            //     }
            // }
            onScroll(e) {
                let scrollTop = e.target.scrollTop;
                let offsetHeight = e.target.offsetHeight;
                let scrollHeight = e.target.scrollHeight;
                if(scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom){
                    this.isReachBottom = true
                    console.log("触底")


                    this.current++
                    console.log("current"+this.current)
                    if(this.current<=this.totalPages) {
                        this.queryBlogs(this.current)
                    }
                }else{
                    this.isReachBottom = false
                }
            },
        },

    })
</script>
</body>

</html>